import { TextArea } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useMedicineData } from "../../hooks/medicine";
import "./css/quiz.scss";
import React, { FC, useState } from "react";
import { ImageUploader, Space, Toast, Dialog } from "antd-mobile";
import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
import dayjs from "dayjs";
import { demoSrc, mockUpload, mockUploadFail } from "./utils";
import { get, post } from "../../utils/request";
import { RefObject } from "react";
import {
  Form,
  Input,
  Button,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
} from "antd-mobile";
import type { DatePickerRef } from "antd-mobile/es/components/date-picker";
function quiz() {
  const navigate = useNavigate();
  const onFinish = (v: any) => {
    // Dialog.alert({
    //   content: <pre>{JSON.stringify(values, null, 2)}</pre>,
    // });
    console.log(v);

    if (confirm("确定提交吗")) {
      post("/members/orders", {
        region: v.name,
        regionCode: v.detail,
        address: v.address,
        orderDetails: [
          {
            price: 1,
            medicineId: "22def664-4d1a-40ac-ae5d-d5d382bfb03a",
            amount: 1,
          },
        ],
      });
    }
    const res = get("/members/orders");
    console.log(res);
  };
  // 限制图片数量
  const LimitCount: FC = () => {
    const maxCount = 3;
    const [fileList, setFileList] = useState<ImageUploadItem[]>([
      {
        url: demoSrc,
      },
    ]);

    return (
      <ImageUploader
        value={fileList}
        onChange={setFileList}
        upload={mockUpload}
        multiple
        maxCount={3}
        showUpload={fileList.length < maxCount}
        onCountExceed={(exceed) => {
          Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`);
        }}
      />
    );
  };

  // 删除图片确认
  const DeleteImage: FC = () => {
    const [fileList, setFileList] = useState<ImageUploadItem[]>([
      {
        url: demoSrc,
      },
    ]);

    return (
      <ImageUploader
        style={{ "--cell-size": "120px" }}
        value={fileList}
        onChange={setFileList}
        upload={mockUpload}
        onDelete={() => {
          return Dialog.confirm({
            content: "是否确认删除",
          });
        }}
      />
    );
  };
  return (
    <div>
      <div className="divQuiz">
        <span
          onClick={() => {
            navigate(-1);
          }}
        >
          取消
        </span>
        <span>快速提问</span>
      </div>
      <div className="divHospital">
        <span className="spanImg">
          <b className="fa-hospital-o fa blue"></b> 全三甲医院医师
        </span>
        <span className="spanImg">
          <b className="fa-check-square fa blue"></b>三小时内专业回复
        </span>
        <span className="spanImg">
          <b className="fa-lock fa blue"></b>隐私保护
        </span>
      </div>

      <Space direction="vertical" cell-size>
        {/* <LimitCount /> */}
        <DeleteImage />
      </Space>
      <div style={{ marginTop: "10px" }}>
        你上传的图片仅对解答问题的医生可见 请勿上传过多图片
      </div>
      <Form
        name="form"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Header>竖直布局表单</Form.Header>
        <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="address" label="地址" help="详情地址">
          <Input placeholder="请输入地址" />
        </Form.Item>
        <Form.Item
          name="birthday"
          label="生日"
          trigger="onConfirm"
          onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open();
          }}
        >
          <DatePicker>
            {(value) =>
              value ? dayjs(value).format("YYYY-MM-DD") : "请选择日期"
            }
          </DatePicker>
        </Form.Item>
        <Form.Item name="detail" label="病情" help="详细信息">
          <TextArea
            placeholder="请描述你的年龄、性别、症状及就诊经历，便于医生进行准确分析，我们会保证你的隐私安全"
            maxLength={100}
            rows={2}
            showCount
          />
        </Form.Item>
        <Form.Item name="favoriteFruits" label="喜爱的水果">
          <Selector
            columns={3}
            multiple
            options={[
              { label: "苹果", value: "apple" },
              { label: "橘子", value: "orange" },
              { label: "香蕉", value: "banana" },
            ]}
          />
        </Form.Item>
        <Form.Item name="slider-demo" label="滑块选择">
          <Slider ticks step={10} />
        </Form.Item>
        <Form.Item
          initialValue={0}
          rules={[
            {
              max: 5,
              min: 1,
              type: "number",
            },
          ]}
          name="stepper-demo"
          label="数量"
        >
          <Stepper />
        </Form.Item>
      </Form>
    </div>
  );
}

export default quiz;
